<template>
  <div class="accountregister">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="input1" placeholder="请输入身份证号" type="number">
          <template slot="prepend">身份证号</template>
          <el-button slot="append" icon="el-icon-search" @click="query()"
            >查询</el-button
          >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-plus"  @click="dialogVisibl = true"
          >添加</el-button
        >
        <el-button icon="el-icon-edit"  @click="dialogVisib = true"
          >修改</el-button
        >
        <el-button icon="el-icon-delete" >删除</el-button>
        <el-button icon="el-icon-printer" >打印</el-button>
      </el-form-item>
    </el-form>
    <!-- 用户详情表格展示 -->
    <div v-show="hidetable" class="tableList">
      <h3>用户详情列表：</h3>
      <el-table :data="tableData" border style="width: 1364px" 
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-style="{ 'height': '48px'}">
        <el-table-column prop="type" label="姓名" width="180" />
        <el-table-column prop="amount" label="身份证号" width="180" />
        <el-table-column prop="yuamount" label="社保卡号" />
        <el-table-column prop="operationtime" label="账户余额" />
        <el-table-column prop="zremarks" label="状态" />
        <el-table-column prop="zremarks" label="备注" />
      </el-table>
    </div>
    <!-- 账户表格 -->
    <div v-show="hidetable" class="tableList">
      <h3>账户详情列表：</h3>
      <el-table :data="tableData" border style="width: 1364px" 
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-style="{ 'height': '48px'}">
        <el-table-column prop="type" label="类型" width="180" />
        <el-table-column prop="amount" label="金额" width="180" />
        <el-table-column prop="yuamount" label="余额" />
        <el-table-column prop="operationtime" label="操作时间" />
        <el-table-column prop="zremarks" label="备注" />
      </el-table>
    </div>
    <!-- 账户结算表格 -->
    <div v-show="hidetable" class="tableList">
      <h3>账户支出列表：</h3>
      <el-table :data="tableList" border style="width: 1364px" 
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-style="{ 'height': '48px'}">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="type" label="结算金额" />
        <el-table-column prop="amount" label="账户余额" width="180" />
        <el-table-column prop="yuamount" label="利息" />
        <el-table-column prop="operationtime" label="利息截止日期" />
        <el-table-column prop="zremarks" label="利率" />
        <el-table-column prop="zremarks" label="备注" />
        <el-table-column prop="zremarks" label="操作员" width="180" />
        <el-table-column prop="zremarks" label="操作时间" />
        <el-table-column prop="zremarks" label="审核人" />
        <el-table-column prop="zremarks" label="审核时间" />
        <el-table-column prop="zremarks" label="审核状态" />
        <el-table-column prop="zremarks" label="财务人员" />
        <el-table-column prop="zremarks" label="到账时间" />
        <el-table-column fixed="right" label="操作" width="100">
          <template>
            <el-button type="text" size="small" @click="dialogVisib = true"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 修改模态框 -->
    <el-dialog
      title="修改"
      :visible.sync="dialogVisib"
      width="462px"
      :before-close="handleClose"
    >
      <el-form :label-position="labelPosition" label-width="80px">
        <el-form-item label="活期利率">
          <el-input
            v-model="modifyinterest"
            placeholder="请输入活期利率"
            type="number"
          />
        </el-form-item>
        <el-form-item label="结算金额">
          <el-input
            v-model="modifyallinterest"
            placeholder="结算金额"
            type="number"
            disabled
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="modifyfixedinterest"
            placeholder="请输入备注"
            type=""
          />
        </el-form-item>
        <el-form-item label="账户余额">
          <el-input
            v-model="modifysurplus"
            placeholder="账户余额"
            type="number"
            disabled
          />
        </el-form-item>
        <el-form-item label="利息">
          <el-input
            v-model="modifyinter"
            placeholder="利息"
            type="number"
            disabled
          />
        </el-form-item>
        <el-form-item label="利息截止日期">
          <el-date-picker
            v-model="modifydate"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="calculation()">计 算</el-button>
        <el-button @click="dialogVisib = false">取 消</el-button>
        <el-button type="primary" @click="handleClose()">修 改</el-button>
      </span>
    </el-dialog>
    <!-- 新增模态框 -->
    <el-dialog
      title="新增"
      :visible.sync="dialogVisibl"
      :before-close="handleClose"
      width="462px"
    >
      <el-form :label-position="labelPosition" label-width="80px">
        <el-form-item label="活期利率">
          <el-input
            v-model="addinterest"
            placeholder="请输入活期利率"
            type="number"
          />
        </el-form-item>
        <el-form-item label="结算金额">
          <el-input
            v-model="addallinterest"
            placeholder="结算金额"
            type="number"
            disabled
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="addfixedinterest"
            placeholder="请输入备注"
            type=""
          />
        </el-form-item>
        <el-form-item label="账户余额">
          <el-input
            v-model="surplus"
            placeholder="账户余额"
            type="number"
            disabled
          />
        </el-form-item>
        <el-form-item label="利息">
          <el-input v-model="inter" placeholder="利息" type="number" disabled />
        </el-form-item>
        <el-form-item label="利息截止日期">
          <el-date-picker v-model="date" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="calculationadd()">计 算</el-button>
        <el-button @click="dialogVisibl = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseadd()">新 增</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      msg: "账户结算登记（职保）",
      input1: "",
      select: "",
      /* 查询展示信息 */
      name: "", // 姓名
      idCard: "", // 身份证号
      socialcard: "", // 社保卡号
      balance: "", // 账户余额
      state: "", // 状态
      remarks: "", // 备注
      hidetable: false, // 纵向表格显示隐藏
      /* 账户信息表格 */
      tableData: [
        /* {
          type: "", // 类型
          amount: "", // 金额
          yuamount: "", // 余额
          operationtime: "", // 操作时间
          zremarks: "", // 账户表格备注
        }, */
      ],
      /* 支出金额表格 */
      tableList: [],
      labelPosition: "right",
      /* 新增、修改模态框数据展示 */
      dialogVisib: false, // 修改模态框显示隐藏
      dialogVisibl: false, // 添加模态框显示隐藏
      options: [
        {
          value: "选项1",
          label: "2018",
        },
        {
          value: "选项2",
          label: "2019",
        },
        {
          value: "选项3",
          label: "2020",
        },
      ],
      /* 修改 */
      modifyinputyear: "",
      modifyinterest: "",
      modifyfixedinterest: "",
      modifyallinterest: "",
      modifysurplus: "",
      modifyinter: "",
      modifydate: "", // 利息截止日期
      /* 新增 */
      addinputyear: "",
      addinterest: "",
      addfixedinterest: "",
      addallinterest: "",
      surplus: "",
      inter: "",
      date: "", // 利息截止日期
    };
  },
  methods: {
    query(name) {
      this.hidetable = true;
    },
    handleClose() {
      this.$confirm("确认修改？")
        .then((_) => {
          // done();
          this.dialogVisib = false;
        })
        .catch((_) => {});
    },
    handleCloseadd() {
      this.$confirm("确认增加？")
        .then((_) => {
          // done();
          this.dialogVisibl = false;
        })
        .catch((_) => {});
    },
    handleClick(row) {
      console.log(row);
    },
    calculation() {
      console.log("101");
    },
    calculationadd() {
      console.log("增加101");
    },
  },
};
</script>

<style scoped lang="scss">
.accountregister {
  padding: 30px;
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-input-group__prepend {
    width: 300px;
  }
  .el-input__inner {
    width: 300px;
  }
  .tableList {
    margin-top: 20px;
  }
  .el-dialog {
    .el-form-item {
      width: 392px;
    }
  }
}
</style>
